<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>boot strap 布局</title>
</head>
<body>
	<div th:fragment="layout_bootstrap">
		<!-- bootstrap 部分 此处只是测试功能部分，并不依赖于界面  -->
		<div class="container">
			<div class="row clearfix">
				<div class="col-md-12 column">
					<nav class="navbar navbar-default" role="navigation">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle"
								data-toggle="collapse"
								data-target="#bs-example-navbar-collapse-1">
								<span class="sr-only">Toggle navigation</span><span
									class="icon-bar"></span><span class="icon-bar"></span><span
									class="icon-bar"></span>
							</button>
							<a class="navbar-brand" th:href="@{/}">首页</a>
						</div>

						<div class="collapse navbar-collapse"
							id="bs-example-navbar-collapse-1">
							<ul class="nav navbar-nav">
								<li class="active"><a th:href="@{/front/home/login}">登录</a></li>

								<li><a th:href="@{/front/home/register}">注册</a></li>
								<li><a th:href="@{/front/home/unRegister}">退出登录</a></li>
								<li><a th:href="@{/front/personalcenter/collections }"
									target="personelcenter">我的收藏</a></li>
								<li><a th:href="@{/front/personalcenter/orders}"
									target="personalcenter">我的订单</a></li>
								<li><a th:href="@{/front/home/ajax}" target="ajaxwindow">AJAX测试
								</a></li>

								<li class="dropdown"><a href="#" class="dropdown-toggle"
									data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
									<ul class="dropdown-menu">
										<li><a href="#">Action</a></li>
										<li><a href="#">Another action</a></li>
										<li><a href="#">Something else here</a></li>
										<li class="divider"></li>
										<li><a href="#">Separated link</a></li>
										<li class="divider"></li>
										<li><a href="#">One more separated link</a></li>
									</ul></li>
							</ul>
							<form class="navbar-form navbar-left" role="search">
								<div class="form-group">
									<input class="form-control" type="text" />
								</div>
								<button type="submit" class="btn btn-default">Submit</button>
							</form>
							<ul class="nav navbar-nav navbar-right">
								<li><a th:href="@{/front/home/chart}" target="cart"><img
										th:src="@{/static/images/cart.jpg}" width="32" height="32">购物车</a></li>
								<li class="dropdown"><a href="#" class="dropdown-toggle"
									data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
									<ul class="dropdown-menu">
										<li><a href="#">Action</a></li>
										<li><a href="#">Another action</a></li>
										<li><a href="#">Something else here</a></li>
										<li class="divider"></li>
										<li><a href="#">Separated link</a></li>
									</ul></li>
							</ul>
						</div>
						<!-- 类目导航 -->
						<div th:include="thymeleaf/front/public/category2 ::category"></div>
					</nav>


					<div class="carousel slide" id="carousel-689969">
						<ol class="carousel-indicators">
							<li class="active" data-slide-to="0"
								data-target="#carousel-689969"></li>
							<li data-slide-to="1" data-target="#carousel-689969"></li>
							<li data-slide-to="2" data-target="#carousel-689969"></li>
						</ol>
						<div class="carousel-inner">
							<div class="item active">
								<img alt=""
									src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/1/default.jpg" />
								<div class="carousel-caption">
									<h4>First Thumbnail label</h4>
									<p>Cras justo odio, dapibus ac facilisis in, egestas eget
										quam. Donec id elit non mi porta gravida at eget metus. Nullam
										id dolor id nibh ultricies vehicula ut id elit.</p>
								</div>
							</div>
							<div class="item">
								<img alt=""
									src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/2/default.jpg" />
								<div class="carousel-caption">
									<h4>Second Thumbnail label</h4>
									<p>Cras justo odio, dapibus ac facilisis in, egestas eget
										quam. Donec id elit non mi porta gravida at eget metus. Nullam
										id dolor id nibh ultricies vehicula ut id elit.</p>
								</div>
							</div>
							<div class="item">
								<img alt=""
									src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/3/default.jpg" />
								<div class="carousel-caption">
									<h4>Third Thumbnail label</h4>
									<p>Cras justo odio, dapibus ac facilisis in, egestas eget
										quam. Donec id elit non mi porta gravida at eget metus. Nullam
										id dolor id nibh ultricies vehicula ut id elit.</p>
								</div>
							</div>
						</div>
						<a class="left carousel-control" href="#carousel-689969"
							data-slide="prev"><span
							class="glyphicon glyphicon-chevron-left"></span></a> <a
							class="right carousel-control" href="#carousel-689969"
							data-slide="next"><span
							class="glyphicon glyphicon-chevron-right"></span></a>
					</div>
					<div class="row">
						<div class="col-md-3">
							<div class="thumbnail">
								<img alt="300x200" th:src="@{/static/images/computer1.png}" />
								<div class="caption">
									<p style="color: #F00; font-size: 18px">价格：5800</p>
									<P>产品名称</p>
									<p>广告语</p>
									<p>
										<a class="btn btn-primary" href="#">加入购物车</a> <a
											class="btn btn-primary" href="#">加关注</a>
									</p>
								</div>
							</div>
						</div>
						<div class="col-md-3">
							<div class="thumbnail">
								<img alt="300x200" th:src="@{/static/images/computer2.png}" />
								<div class="caption">
									<p style="color: #F00; font-size: 18px">价格：5800</p>
									<P>产品名称</p>
									<p>广告语</p>
									<p>
										<a class="btn btn-primary" href="#">加入购物车</a> <a
											class="btn btn-primary" href="#">加关注</a>
									</p>
								</div>
							</div>
						</div>
						<div class="col-md-3">
							<div class="thumbnail">
								<img alt="300x200" th:src="@{/static/images/computer3.png}" />
								<div class="caption">
									<p style="color: #F00; font-size: 18px">价格：5800</p>
									<P>产品名称</p>
									<p>广告语</p>
									<p>
										<a class="btn btn-primary" href="#">加入购物车</a> <a
											class="btn btn-primary" href="#">加关注</a>
									</p>
								</div>
							</div>
						</div>

						<div class="col-md-3">
							<div class="thumbnail">
								<img alt="300x200" th:src="@{/static/images/computer4.png}" />
								<div class="caption">
									<p style="color: #F00; font-size: 18px">价格：5800</p>
									<P>产品名称</p>
									<p>广告语</p>
									<p>
										<a class="btn btn-primary" href="#">加入购物车</a> <a
											class="btn btn-primary" href="#">加关注</a>
									</p>
								</div>
							</div>
						</div>

					</div>
					<div class="row">
						<div class="col-md-3">
							<div class="thumbnail">
								<img alt="300x200" th:src="@{/static/images/computer1.png}" />
								<div class="caption">
									<p style="color: #F00; font-size: 18px">价格：5800</p>
									<P>产品名称</p>
									<p>广告语</p>
									<p>
										<a class="btn btn-primary" href="#">加入购物车</a> <a
											class="btn btn-primary" href="#">加关注</a>
									</p>
								</div>
							</div>
						</div>
						<div class="col-md-3">
							<div class="thumbnail">
								<img alt="300x200" th:src="@{/static/images/computer2.png}" />
								<div class="caption">
									<p style="color: #F00; font-size: 18px">价格：5800</p>
									<P>产品名称</p>
									<p>广告语</p>
									<p>
										<a class="btn btn-primary" href="#">加入购物车</a> <a
											class="btn btn-primary" href="#">加关注</a>
									</p>
								</div>
							</div>
						</div>
						<div class="col-md-3">
							<div class="thumbnail">
								<img alt="300x200" th:src="@{/static/images/computer3.png}" />
								<div class="caption">
									<p style="color: #F00; font-size: 18px">价格：5800</p>
									<P>产品名称</p>
									<p>广告语</p>
									<p>
										<a class="btn btn-primary" href="#">加入购物车</a> <a
											class="btn btn-primary" href="#">加关注</a>
									</p>
								</div>
							</div>
						</div>

						<div class="col-md-3">
							<div class="thumbnail">
								<img alt="300x200" th:src="@{/static/images/computer4.png}" />
								<div class="caption">
									<p style="color: #F00; font-size: 18px">价格：5800</p>
									<P>产品名称</p>
									<p>广告语</p>
									<p>
										<a class="btn btn-primary" href="#">加入购物车</a> <a
											class="btn btn-primary" href="#">加关注</a>
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>